<template>
  <div id="authentication">
    <header>
      <i @click="goBack()"><img src="../../image/icon_return.png" alt="" style="width:100%"></i>
      <div>医师认证</div>
    </header>
    <div class="swiper-container swipe" id="outSwiper">
      <div class="swiper-slide">
        <ul class="">
          <li style="padding:0px 15px">
            <!-- <router-link to="/"> -->
            <a @click="gopersonal">
              <img src="../../image/icon_personal_data.png" width="28" height="28" alt="">
              <h3>填写个人基本资料</h3>
              <a v-show="!isShow.pData">去填写</a>
              <i v-show="isShow.pData">已完成</i>
            </a>
          </li>
          <li style="padding:0px 15px">
            <a>
              <img src="../../image/icon_binding_mobile.png" width="28" height="28" alt="">
              <h3>绑定手机号</h3>
              <a v-show="!isShow.pPhone">去绑定</a>
              <i v-show="isShow.pPhone">已完成</i>
            </a>
          </li>
          <li class="noBorder" style="padding:0px 15px">
            <a @click="goNext">
              <img src="../../image/icon_qualification_certification.png" width="28" height="28" alt="">
              <h3>资质证书认证</h3>
              <a v-show="!isShow.pAuth">去上传</a>
              <i v-show="isShow.pAuth">已完成</i>
            </a>
          </li>
        </ul>
        <div @click="hidden()" style="width:100%;height:100%;padding: 0px 40px;
        display: flex;justify-content: space-around;align-items: center;">
          <div class="tankuang" v-if="show">
            <img src="../../image/failbg.png" alt="">
            <div>
              <div class="top">
                <div class="fail">
                  <img src="../../image/fail.png" alt="">
                </div>
              </div>
              <div class="bottom">{{pass}}</div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <a href="tel: 4006062030" class='tel'>
      <div class="left">
        <img src="../../image/phone.png" alt="">
        官方客服</div>
      <div style="background: rgba(0, 0, 0, 0.1);width: 1px;height: 33px;margin: 0px 15px 0px 12px;"></div>
      <div style="font-size: 11px;color: rgba(0, 0, 0, 0.8)">400-606-2030</div>
    </a>
    <div class="footer">
      <a @click='commit()'>{{status}}</a>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        userid: '', //用户id
        isShow: {
          //个人
          pData: false, //默认未认证
          pPhone: true,
          pAuth: false,
        },
        status: '立即申请', //状态  立即申请  审核中  审核通过 审核失败
        show: false, //审核失败弹框
        pass: '', //审核失败的原因
      }
    },
    components: {},
    methods: {
      goBack() {
        if (this.$route.query.type == 'home') {
          this.$router.push({
            name: 'home'
          });
        } else {
          this.$router.push({
            name: 'my'
          });
        }

      },
      goNext() {
        if (this.status == '审核通过') {
          this.$utils._toast('该资料已审核通过，需修改请联系门诊')
        } else {
          this.$router.push({
            name: 'qualificationCertificate'
          });
        }
      },
      gopersonal() {
        if (this.status == '审核通过') {
          this.$utils._toast('该资料已审核通过，需修改请联系门诊')
        } else {
          this.$router.push({
            name: 'personalData'
          });
        }
      },

      //关闭弹窗
      hidden() {
        this.show = false;
      },
      //判断是否申请过
      isCommit() {
        this.userid = localStorage.getItem("loginMobile");
        this.$api.get(this.$api.baseURLSchool, "select_cid/doctor/" + this.userid, {}, r => {
          if (r.data.ret == 0) {
            this.status = '立即申请';
          } else if (r.data.ret == 1) {
            if (r.data.info.zhicheng_pic) {
              this.isShow.pAuth = true;
            } else {
              this.status = '立即申请';
            }
            if (r.data.info.name) {
              this.isShow.pData = true;
            } else {
              this.status = '立即申请';
            }
          } else if (r.data.ret == -3) {
            localStorage.clear();
            this.isLogin()
          }
        }, err => {
          console.log(err);
        })
      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      // 判断是否审核通过
      isPass() {
        //判断用户是否认证 如果认证审核通过  per_app_status 0已提交未审核  1审核通过  2审核失败
        this.$api.get(this.$api.baseURLSchool, "user_info_check?id=" + localStorage.getItem("loginMobile"), {}, r => {
          if (r.data.info.info1.per_app_status == "1") {
            this.status = "审核通过";
          } else if (r.data.info.info1.per_app_status === "0") {
            this.status = "审核中...";
          } else if (r.data.info.info1.per_app_status == "2") {
            this.status = "重新申请";
            this.show = true
            this.pass = r.data.info.info2.content
          }
        }, err => {
          console.log(err);
        })

      },
      //立即申请
      commit() {
        this.isCommit();
        if (this.isShow.pData && this.isShow.pAuth) {
          if (this.status == '立即申请' || this.status == '重新申请') {
            const obj = {
              id: this.userid,
              per_app_status: '0',
            }
            this.$api.post(this.$api.baseURLSchool, "updatedata/user/edit", obj, r => {
              if (r.data.ret == 1) {
                this.$utils._toast("提交成功，等待审核");
                this.status = '审核中...'
              }
            }, err => {
              console.log(err);
            })
          } else {
            return;
          }
        } else {
          this.$utils._toast("请检查是否填写完整");
        }
      },
    },
    created() {
      this.isCommit();
      this.isPass();
    },
    mounted() {

    }
  }

</script>
<style lang="scss" scoped>
  .swiper-slide {
    display: flex;
    flex-direction: column;

    .tankuang {
      position: relative;

      &>div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        flex-direction: column;

        .top {
          height: 101px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .fail {
            color: #fff;
            font-size: 9px;
            position: relative;
            margin-top: 10px;

            div {
              position: absolute;
              width: 100%;
              text-align: center;
              bottom: 10px;
            }
          }
        }

        .bottom {
          flex: 1;
          overflow-y: auto;
          padding: 10px;
          color: rgb(102, 102, 102);
          font-size: 13px;
        }
      }
    }
  }

</style>
